<template>
  <div class="container">
    <div class="search-box">
      <el-input v-model="input" placeholder="请输入内容" class="input-box"></el-input>
      <el-button @click="clearInput">清除</el-button>
      <el-button type="primary" @click="searchInput">搜索</el-button>
    </div>
    <el-table border style="width: 100%" :data="taskList">
      <el-table-column type="index" label="任务编号" width="80"> </el-table-column>
      <el-table-column prop="name" label="任务名称"> </el-table-column>
      <el-table-column prop="des" label="任务描述"> </el-table-column>
      <el-table-column fixed="right" label="操作" width="180">
        <template #default="{ row }">
          <el-button size="mini" style="margin-right: 10px" @click="updateTask(row.id)">
            编辑
          </el-button>
          <el-popconfirm
            confirmButtonText="好的"
            cancelButtonText="不用了"
            icon="el-icon-info"
            iconColor="red"
            title="确定删除任务吗？"
            @confirm="favoDetele(row.id)"
          >
            <template #reference>
              <el-button size="mini" type="danger">删除</el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <div class="pageContainer">
      <el-pagination
        layout="prev, pager, next"
        :total="total"
        :page-size="params._limit"
        @current-change="handleCurrentChange"
      >
      </el-pagination>
      <el-button size="small" plain @click="dialogFormVisible = true">+ 新增</el-button>
    </div>
    <!-- 弹窗 -->
    <!-- :title="this.fomr.id ? '编辑操作' : '新增操作'" -->
    <el-dialog
      :title="this.form.id ? '编辑操作' : '新增操作'"
      :visible="dialogFormVisible"
      @close="closeVisible"
    >
      <el-form :model="form" :rules="rules" ref="ruleForm">
        <el-form-item label="任务名称" prop="name">
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="任务描述" prop="des">
          <el-input v-model="form.des" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="closeVisible">取 消</el-button>
        <el-button type="primary" @click="confirm">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { v4 as uuidv4 } from 'uuid'
import {
  getTaskListAPI,
  delTaskByIdAPI,
  addTaskAPI,
  getTaskByIdAPI,
  updateTaskAPI,
  searchAPI
} from '@/api'
export default {
  data() {
    return {
      // 任务列表
      taskList: [],
      params: {
        _page: 1, // 当前第几页
        _limit: 5 // 每页条数
      },
      total: 0,
      // 操作的表单数据
      form: {
        name: '',
        des: '',
        id: ''
      },
      // 控制弹窗
      dialogFormVisible: false,
      // 输入框输入内容
      input: '',
      // 验证规则
      rules: {
        name: [
          { required: true, message: '请输入任务名称', trigger: ['blur', 'change'] },
          { min: 1, max: 55, message: '长度在 1 到 55 个字符', trigger: ['blur', 'change'] }
        ],
        des: [
          { required: true, message: '请输入任务描述', trigger: ['blur', 'change'] },
          { min: 1, max: 55, message: '长度在 1 到 55 个字符', trigger: ['blur', 'change'] }
        ]
      }
    }
  },
  mounted() {
    this.getTaskList()
  },
  methods: {
    // 渲染列表
    async getTaskList() {
      // , headers
      const { data, headers } = await getTaskListAPI(this.params)
      // console.log(data, headers)
      this.taskList = data
      this.total = +headers['x-total-count']
      // console.log(this.total)
    },
    // 页码改变时触发
    handleCurrentChange(page) {
      // console.log(page)
      this.params._page = page
      // 重新发送请求
      this.getTaskList()
    },
    // 点击删除，之后点击确定按钮触发
    async favoDetele(id) {
      // console.log('id:', id)
      await delTaskByIdAPI(id)
      // 重新渲染
      this.getTaskList()
      // 提示
      this.$message.success('删除数据成功')
    },
    // 关闭弹窗
    closeVisible() {
      this.dialogFormVisible = false
      // 重置数据
      this.$refs.ruleForm.resetFields()
      this.form = {
        name: '',
        des: '',
        id: ''
      }
    },
    // 点击弹窗确定按钮触发
    confirm() {
      // 兜底校验
      this.$refs.ruleForm.validate(async valid => {
        if (!valid) return
        // 判断 编辑或者新增操作
        if (this.form.id !== '') {
          // 编辑
          await updateTaskAPI(this.form)
        } else {
          // 新增
          // 使用uuid新增一个id
          this.form.id = uuidv4()
          await addTaskAPI(this.form)
        }
        // 渲染列表
        this.getTaskList()
        // 提示
        this.$message.success(`${this.form.id ? '修改' : '新增'}'数据成功'`)
        // this.$message.success('操作数据成功')
        this.closeVisible()
      })
    },
    // 修改操作
    async updateTask(id) {
      // 打开弹窗
      this.dialogFormVisible = true
      // 根据id查询数据，进行数据回填
      const res = await getTaskByIdAPI(id)
      // console.log(res)
      this.form = res.data
    },
    // 搜索
    async searchInput() {
      const res = await searchAPI({ name: this.input })
      this.taskList = res.data
      this.total = 1
    },
    // 清空
    clearInput() {
      this.input = ''
      this.getTaskList()
    }
  }
}
</script>

<style scoped lang="less">
.container {
  width: 800px;
  margin: 0 auto;
}
.search-box {
  display: flex;
  margin-bottom: 10px;
  .input-box {
    margin-right: 20px;
  }
}
.pageContainer {
  margin-top: 10px;
  display: flex;
  justify-content: space-between;
}
</style>
